<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>css fix and width</title>
    <style>

        .example .box {
            border: 1px solid #efefef;
            height: 100px;
            background-color: cornflowerblue;
            position: relative;
            color: rgba(0,0,0,0.2);
            margin-top: 20px;
            margin-bottom: 30px;
            overflow: hidden;
        }

        .example .box::before {
            content: '例子容器';
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            font-weight: bold;
            color: #ffffff;
            /*box-shadow: 0px 0px 2px 2px #269af2;*/
            /*background-color: rgba(255,255,255,1);*/
            /*opacity: 0.6;*/
        }
        .back {
            position: fixed;
            right: 0;
            bottom: 10vh;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #269af2;
            color: #ffffff;
            text-align: center;
            line-height: 50px;
            box-shadow: 0px 0px 2px 2px #efefef;
        }


        #widthAuto {
            width: auto;
        }
        #widthAuto::before{
            content: 'width: auto';
        }
        #maxContent {
            width: max-content;
        }
        #maxContent::before {
            content: 'width: max-content';
        }
        #minContent {
            width: min-content;
        }
        #minContent::before {
            content: 'width: min-content';
        }
        #fitContent {
            width: fit-content;
        }
        #fitContent::before {
            content: 'width: fit-content';
        }

    </style>
</head>
<body>
<div class="describle">
    <fieldset>
        <legend>width</legend>
        <details>
            <ul>
                <li>
                    <h5><a href="#widthAuto">auto</a></h5>
                    <p>浏览器将会为指定的元素计算并选择一个宽度。</p>
                </li>
                <li>
                    <h5><a href="#maxContent">
                        max-content
                    </a></h5>
                    <p>元素内容固有的（intrinsic）合适宽度。</p>
                </li>
                <li>
                    <h5><a href="#minContent">min-content</a></h5>
                    <p>元素内容固有的最小宽度</p>
                    <p>文字则未内部最短文字的宽度</p>
                </li>
                <li>
                    <h5><a href="#fitContent">fit-content</a></h5>
                    <p>取以下两种值中的较大值：
                        固有的最小宽度
                        固有首选宽度（max-content）和可用宽度（available）两者中的较小值</p>
                </li>
            </ul>
        </details>
    </fieldset>
    <fieldset>
        <legend>flex</legend>
        <details>
            <ul>
                <li>
                    <h3><a href="#flexGrow">flex-grow</a></h3>
                    <p>flex: 1</p>
                    <p>剩余空间是 flex 容器的大小减去所有 flex 项的大小加起来的大小。如果所有的兄弟项目都有相同的 flex-grow 系数，那么所有的项目将剩余空间按相同比例分配，否则将根据不同的 flex-grow 定义的比例进行分配。</p>
                </li>
                <li>
                    <h3><a href="">flex-shrink</a></h3>
                    <p>CSS flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。</p>
                </li>
                <li>
                    <h3><a href="">flex-base</a></h3>
                    <p>
                        CSS 属性 flex-basis 指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。
                    </p>
                </li>
            </ul>
        </details>
    </fieldset>
</div>


<div class="example">
    <div id="widthAuto" class="box">
        <div>HTML5 是下一代 HTML 标准。</div>

        <div>HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。</div>

        <div>HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。</div>

        <div>HTML5 受包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等国外主流浏览器的支持；国内的傲游浏览器（Maxthon）， 360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等同样具备支持HTML5的能力。</div>
    </div>
    <div id="maxContent" class="box">
        <div>HTML5 是下一代 HTML 标准。</div>

        <div>HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。</div>

        <div>HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。</div>

        <div>HTML5 受包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等国外主流浏览器的支持；国内的傲游浏览器（Maxthon）， 360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等同样具备支持HTML5的能力。</div>
    </div>
    <div id="minContent" class="box">
        <div>HTML5 是下一代 HTML 标准。</div>

        <div>HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。</div>

        <div>HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。</div>

        <div>HTML5 受包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等国外主流浏览器的支持；国内的傲游浏览器（Maxthon）， 360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等同样具备支持HTML5的能力。</div>
    </div>
    <div id="fitContent" class="box">
        <div>HTML5 是下一代 HTML 标准。</div>

        <div>HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。</div>

        <div>HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。</div>

        <div>HTML5 受包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等国外主流浏览器的支持；国内的傲游浏览器（Maxthon）， 360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等同样具备支持HTML5的能力。</div>
    </div>
    <div id="flexGrow" class="box"></div>
</div>
<div class="back">
    <a href="javascript:history.back(-1)">返回</a>
</div>
</body>
</html>
